<template>
  <el-card class="dynamic-list">
    <template #header>
      <div class="card-header">
        <span>动态</span>
        <el-button class="button" type="text" :icon="Back" @click="reback">后退</el-button>
      </div>
    </template>
    <el-timeline>
      <el-timeline-item
        v-for="(dynamic, index) in dynamics"
        :key="index"
        :timestamp="dynamic.createTime"
        placement="top"
      >
        <el-card class="dynamic-text">
          <div :innerHTML="dynamic.dynamic"></div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :hide-on-single-page="true"
      v-model:currentPage="current"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script lang="ts" setup>
import { Back } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue';
import type { Dynamic } from '@/api/type'
import { getDynamic } from '@/api/request'

const total = ref(0)

const current = ref(1)

const dynamics = ref<Dynamic[]>()

onMounted(() => {
  loadPageDynamic()
})

const reback = () => {
  history.back()
}

const loadPageDynamic = async () => {
  const page = await getDynamic(current.value)
  dynamics.value = page.records
  total.value = page.total
}

const handleCurrentChange = (val: number) => {
  current.value = val
  loadPageDynamic()
}

</script>

<style lang="less" scoped>
.dynamic-list {
  width: 80%;
  margin-left: 10%;
  padding: 0;
}

.dynamic-text {
  border-radius: 10px;
  box-shadow: 20px 20px 60px #d9d9d9, -20px -20px 60px #ffffff;
  min-height: 100px;
  padding: 10px;
  margin: 20px;
}
</style>
